<template>
    <view class="layer-class-wrapper" style="height:100%;">
        <mescroll-uni
                top="0"
                @down="downCallback"
                @up="upCallback"
                :down="downOption"
                :up="upOption"
                class="mescroll-flex"
                :fixed="false"
                @init="mescrollInit"
        >
            <view class="book-item" @tap="watchMore(item)" v-for="(item, index) in dataList" :key="index">
                <image :class="{'round': idName==='author'}" mode="aspectFit" :src="item[idName+'Head']"/>
                <view class="book-detail">
                    <text class="book-detail-title">{{item[idName+'Name']}}</text>
                    <view class="book-detail-content ellipsis">{{item[idName+'Introduction']}}</view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import service from "@/service";
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    export default {
        name: "layer-class",
        props: {
            idName: {
                type: String,
                default: ''
            }
        },
        components: {
            MescrollUni
        },
        data(){
            return{
                dataList: [],
                page: 1,
                limit: 20,
                downOption: {
                    auto: true,
                },
                upOption:{
                    auto: true,
                    use: true, // 是否启用上拉加载; 默认true
                    // auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<',
                    defaultUrl: 'https://img.thumbrary.com/mzgd.png'
                },
                mescroll: null
            }
        },
        watch: {
            idName(newVal){
                this.page = 1;
                this.dataList = [];
                this.mescroll && this.mescroll.resetUpScroll();
            }
        },
        mounted(){
            // this.getClassList(this.idName);
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.dataList = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getClassList(this.idName);
            },
            getClassList (idName) {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassList({
                    data: {
                        page: this.page,
                        limit: this.limit
                    },
                    type: idName,
                    success: res => {
                        uni.hideLoading()
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.dataList.push(...data) : this.dataList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
            },
            watchMore(item){
                uni.navigateTo({
                    url: `./class-info-list?idName=${this.idName}&id=${item[this.idName+'Id']}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .layer-class-wrapper{
        width: 100%;
        .mescroll-flex{
            overflow: auto;
        }
        .ellipsis{
           -webkit-line-clamp: 2;
        }
        .book-item{
            display: flex;
            margin-bottom: 20rpx;
            height: 150rpx;
            overflow: hidden;
            image{
                flex: 0 0 200rpx;
                height: 150rpx;
            }
            .round{
                flex: 0 0 150rpx;
                height: 150rpx;
                border-radius: 50%;
                margin-right: 50rpx;
            }
            .book-detail{
                height: 200rpx;
                margin-left: 20rpx;
                &-title{
                    font-size:28rpx;
                    font-weight:bold;
                    color:rgba(51,51,51,1);
                }
                &-content{
                    font-size:24rpx;
                    line-height:33rpx;
                    color:rgba(153,153,153,1);
                    margin-top: 10rpx;
                    -webkit-line-clamp: 3;
                }
            }
        }
    }
</style>
